<template>
    <view class="main">
        <view class="form-card">
            <view class="form-row">
                <text class="label">新密码</text>
                <u-input
                    class="input"
                    v-model="newPassword"
                    type="password"
                    :password="true"
                    placeholder="请输入新密码"
                    border="none"
                    clearable
                />
            </view>
            <view class="divider"></view>
            <view class="form-row">
                <text class="label">确认密码</text>
                <u-input
                    class="input"
                    v-model="confirmPassword"
                    type="password"
                    :password="true"
                    placeholder="再次输入新密码"
                    border="none"
                    clearable
                />
            </view>
        </view>

        <view class="tips">需由6-20位数字、字母组成，至少两种</view>

        <view class="btn-wrap">
            <view class="submit-btn" @click="handleSubmit">完成</view>
        </view>
    </view>
</template>
<script>
import { resetPassword } from '@/api/index.js'
export default {
    data() {
        return {
            newPassword: '',
            confirmPassword: '',
            submitting: false
        }
    },
    methods: {
        validatePassword(pwd) {
            if (!pwd) return false
            if (pwd.length < 6 || pwd.length > 20) return false
            const hasDigit = /\d/.test(pwd)
            const hasLetter = /[a-zA-Z]/.test(pwd)
            const hasSymbol = /[^a-zA-Z0-9]/.test(pwd)
            const kindCount = [hasDigit, hasLetter, hasSymbol].filter(Boolean).length
            return kindCount >= 2
        },
        handleSubmit() {
            if (!this.validatePassword(this.newPassword)) {
                uni.showToast({ title: '密码需6-20位且至少包含两种字符类型', icon: 'none' })
                return
            }
            if (this.newPassword !== this.confirmPassword) {
                uni.showToast({ title: '两次输入的密码不一致', icon: 'none' })
                return
            }
            // 这里可调用修改密码接口
            this.resetPasswordEvent()

        },
        resetPasswordEvent() {
            resetPassword({
                phone: this.$store.getters.userInfo.telephone,
                new_password: this.newPassword
            }).then((res) => {
                if (res.errno === 0) {
                    uni.showToast({title:'设置成功', icon: 'success'})
                } else {
                    uni.showToast({title: res.msg || '修改失败'})
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.main {
    width: 100%;
    min-height: 100vh;
    background: #f5f5f5;
    padding-top: 28rpx;
}

.form-card {
    margin: 0 32rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.1);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    overflow: hidden;
}

.form-row {
    display: flex;
    align-items: center;
    padding: 28rpx;
}

.label {
    width: 180rpx;
    font-size: 28rpx;
    color: #333333;
}

.input {
    flex: 1;
    font-size: 28rpx;
}

.divider {
    height: 1rpx;
    background: #EEEEEE;
}

.tips {
    margin: 28rpx 32rpx 0;
    font-size: 24rpx;
    color: #999999;
}

.btn-wrap {
    margin-top: 296rpx;
    padding: 0 32rpx;
}

.submit-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(90deg, #0785CF 0%, #25A4EF 100%);
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    font-weight: 600;
    color: #FFFFFF;
    box-shadow: 0 4rpx 20rpx rgba(7, 133, 207, 0.2);
}
</style>